<template>
	<div>
		<el-checkbox-group v-model="checkList" @change="changeGroup">
			<el-checkbox label="1人团"></el-checkbox>
			<el-checkbox label="2人团"></el-checkbox>
			<el-checkbox label="3人团"></el-checkbox>
			<el-checkbox label="4人团"></el-checkbox>
		</el-checkbox-group>
		<el-tabs v-model="activeName" >
			<el-tab-pane v-for="(item,index) in tabslist" :key='index' :label="item.name" :name="item.name">
				<el-form ref="form" :model="item.form" label-width="80px">
					<el-form-item label="活动名称">
						<el-input v-model="item.form.name"></el-input>
					</el-form-item>
					<el-form-item label="活动形式">
						<el-input type="textarea" v-model="item.form.desc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
	
	import { ref } from 'vue';
	const checkList = ref([])

	const activeName = ref('')
	const onSubmit = () => {
		
	}
	const tabslist = ref([])
	const changeGroup = (e) => {
		activeName.value = checkList.value[0]
		tabslist.value = e.map((val)=>{
			return {
				name:val,
				form:{
					name:'',
					desc:''
				}
			}
		})
	}
</script>

<style>
</style>